<template>
  <div style="margin-top: 5%">
    <h1>WELCOME</h1>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="danger"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged">
      <p>请在 {{ dismissCountDown }} 秒内选择, 否则手机将启动自爆程序!!!</p>
      <b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px"></b-progress>
    </b-alert>
    <transition appear appear-class="div1-appear-class"
                appear-active-class="div1-appear-active-class">
      <div :style="{'width': width3 + 'px', 'height': width3+ 'px','margin-left': '10%','margin-top': width15 + 'px'}">
        <router-link to="2048">
          <img src="../../static/2048.jpg" :style="{'width': width3+  'px', 'height': width3+ 'px'}"/>
          <span class="title">2048</span>
        </router-link>
      </div>
    </transition>
    <transition appear appear-class="div2-appear-class"
                appear-active-class="div2-appear-active-class">
      <div :style="{'width': width3+  'px', 'height': width3+ 'px','margin-left': '60%','margin-top': -width3 + 'px'}">
        <router-link to="userComment">
          <img src="../../static/userComment.jpg" :style="{'width': width3+  'px', 'height': width3+ 'px'}"/>
          <span class="title">用户留言</span>
        </router-link>
      </div>
    </transition>

    <transition appear appear-class="div3-appear-class"
                appear-active-class="div3-appear-active-class">
      <div :style="{'width': width3+  'px', 'height': width3+ 'px','margin-left': '10%','margin-top': width15 + 'px'}">
        <router-link to="game21">
          <img src="../../static/敬请期待.jpg" :style="{'width': width3+  'px', 'height': width3+ 'px'}"/>
          <span class="title">21点</span>
        </router-link>
      </div>
    </transition>
    <transition appear appear-class="div4-appear-class"
                appear-active-class="div4-appear-active-class">
      <div :style="{'width': width3+  'px', 'height': width3+ 'px', 'margin-left': '60%','margin-top': -width3 + 'px'}">
        <router-link to="goldenFlowers">
          <img src="../../static/goldenFlowers.jpg" :style="{'width': width3+  'px', 'height': width3+ 'px'}"/>
          <span class="title">炸金花</span>
        </router-link>
      </div>
    </transition>
  </div>

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      width3: window.screen.availWidth * 0.3,
      width15: window.screen.availWidth * 0.15,
      dismissCountDown: 0,
      dismissSecs: 10
    }
  },
  mounted () {
    setTimeout(this.showAlert, 3000)
  },
  methods: {
    countDownChanged (dismissCountDown) {
      this.dismissCountDown = dismissCountDown
    },
    showAlert () {
      this.dismissCountDown = this.dismissSecs
    }
  }
}
</script>

<style lang="stylus" scoped>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  .reverse-active-class
    transition all 2s

  .reverse-class
    transform translateY(100%) translateX(100%)

  .div1-appear-active-class
    transition all 0.5s

  .div1-appear-class
    transform translateY(60%) translateX(60%)

  .div2-appear-active-class
    transition all 1s

  .div2-appear-class
    transform translateY(60%) translateX(-60%)

  .div3-appear-active-class
    transition all 1.5s

  .div3-appear-class
    transform translateY(-60%) translateX(60%)

  .div4-appear-active-class
    transition all 2s

  .div4-appear-class
    transform translateY(-60%) translateX(-60%)

  .title
    display: block
    margin-bottom: 6px
    height: 34px
    line-height: 20px
    font-size: 17px
    color: #303030
    overflow: hidden
    text-overflow: ellipsis
  img {
    border-radius : 20%
  }
</style>
